<div
  class="lv-advanced-filter-container"
  [ngClass]="{
    'lv-advanced-filter-container-wrap': lvWrap,
    'lv-advanced-filter-container-focus': popoverVisible
  }"
  #advancedFilter
  (click)="onInputClick()"
>
  <i lv-icon="lv-icon-advanced-search" class="lv-advanced-filter-icon"></i>

  <div
    class="lv-advanced-filter-wrapper"
    [ngClass]="{ 'lv-advanced-filter-wrapper-has-scroll': advancedWrapperHasScroll }"
    #advancedWrapper
    [style.maxHeight]="lvWrap ? 32 * lvMaxTagRow + 'px' : 'auto'"
  >
    <div class="lv-advanced-filter-filters-container">
      <div class="lv-advanced-filter-tag-container">
        <lv-tag
          *ngFor="let tag of showTags"
          lvCheckable
          [lvChecked]="checkedTag"
          [ngModel]="[tag]"
          [lvTagTemplate]="tagText"
          [@.disabled]="tag.field === 'numTag'"
          (lvRemove)="onRemoveTag($event)"
          (lvItemClick)="onClickTag($event)"
          (lvMotionDone)="onMotionDone()"
          #lvTag
        ></lv-tag>
        <div
          lv-popover
          [lvPopoverContent]="fieldContent"
          lvPopoverPosition="bottomLeft"
          lvPopoverTrigger="customize"
          [(lvPopoverVisible)]="popoverVisible"
          [lvPopoverOrigin]="popoverRef"
          lvPopoverShowArrow="false"
          [lvPopoverClassName]="isFilterPanel ? 'lv-advanced-filter-panel-container' : 'lv-advanced-filter-popover-container'"
          class="lv-advanced-filter-input-container"
          (lvPopoverExternalTrigger)="onCancel($event)"
          [lvPopoverOuterClosable]="outerClosable"
          [lvPopoverAfterClose]="afterClose"
          [lvPopoverBeforeOpen]="beforeOpen"
          #lvPopover="lvPopover"
        >
          <input
            #inputContent
            [ngModel]="''"
            (ngModelChange)="onInput($event)"
            class="lv-advanced-filter-toggle"
            [placeholder]="lvPlaceholder"
            lv-input
          />
        </div>
      </div>
    </div>
  </div>

  <ng-container *ngIf="typeUtils.isTemplateRef(lvCustomButton)">
    <ng-container *ngTemplateOutlet="lvCustomButton"></ng-container>
  </ng-container>
  <button lv-button (click)="onClearAll($event)" lvType="link" lvSize="auto" class="lv-advanced-filter-clear-btn">
    {{ i18n.get('clear') }}
  </button>
</div>

<ng-template #fieldContent>
  <ng-container *ngIf="!isFilterPanel">
    <ng-container *ngIf="lvFilterPanelType === 'normal' || this.showSearchResult(); else treePanelTemplate">
      <!-- 普通下拉面板 -->
      <lv-select
        [ngModel]="''"
        [lvOptions]="!this.showSearchResult() ? filters : searchFilters"
        [lvInline]="true"
        [lvContentTemplate]="optionTpl"
        (ngModelChange)="onSelectFilter($event)"
      ></lv-select>
      <ng-template #optionTpl let-data>
        <div *ngIf="!this.showSearchResult(); else searchResultTpl">{{ data.label }}</div>
        <ng-template #searchResultTpl>
          <div [ngClass]="{ 'lv-advanced-filter-search-readonly': data.readonly }">
            <span *ngIf="data.readonly; else highlight">{{ data.label }}</span>
            <ng-template #highlight>
              <lv-highlight [lvContent]="searchInput" [lvWholeStr]="data.label"></lv-highlight>
            </ng-template>
          </div>
        </ng-template>
      </ng-template>
    </ng-container>

    <!-- 树形下拉面板 -->
    <ng-template #treePanelTemplate>
      <div class="lv-advanced-filter-tree-panel">
        <ng-container *ngIf="typeUtils.isTemplateRef(lvTreeFiltersHeader)">
          <ng-container *ngTemplateOutlet="lvTreeFiltersHeader"></ng-container>
        </ng-container>
        <lv-tree
          [lvData]="treeFilters"
          lvBlockNode
          [lvSelectionAssociate]="false"
          [lvShowExpandedIcon]="{ expandIcon: 'lv-icon-arrow-down', collapseIcon: 'lv-icon-arrow-right' }"
          (lvClick)="onTreePanelClick($event)"
        ></lv-tree>
      </div>
    </ng-template>
  </ng-container>
  <div
    *ngIf="isFilterPanel"
    [ngClass]="{
      'lv-advanced-filter-input-number-container': currentFilter?.type === 'number' || currentFilter?.type === 'numberRange',
      'lv-advanced-filter-text-input-container': currentFilter?.type === 'textInput',
      'lv-advanced-filter-dateRange-picker-container': currentFilter?.type === 'dateRangePicker'
    }"
  >
    <ng-container *ngIf="currentFilter?.type === 'customize'">
      <ng-container
        *ngTemplateOutlet="
          fieldInfoOption?.render;
          context: { value: contextValue, onCancel: onCancel.bind(this), onConfirm: onConfirm.bind(this) }
        "
      ></ng-container>
    </ng-container>

    <lv-group *ngIf="currentFilter?.type !== 'customize'" lvDirection="vertical" [lvGutter]="spaceSize">
      <lv-radio-group *ngIf="hasHeader" [(ngModel)]="filterMode" class="lv-advanced-filter-radio-group" (ngModelChange)="onModeChange()">
        <lv-group>
          <lv-radio *ngFor="let mode of headerModes" [lvViewType]="'button'" [lvValue]="mode.value">{{ i18n.get(mode.label) }}</lv-radio>
        </lv-group>
      </lv-radio-group>

      <ng-container *ngIf="fieldInfoOption?.render">
        <ng-container *ngTemplateOutlet="fieldInfoOption.render; context: { value: contextValue }"></ng-container>
      </ng-container>

      <ng-container *ngIf="!fieldInfoOption?.render" [ngSwitch]="currentFilter?.type">
        <ng-container *ngSwitchCase="'single'" [ngTemplateOutlet]="selectContent"></ng-container>
        <ng-container *ngSwitchCase="'multiple'" [ngTemplateOutlet]="selectContent"></ng-container>
        <ng-container *ngSwitchCase="'number'" [ngTemplateOutlet]="numberContent"></ng-container>
        <ng-container *ngSwitchCase="'numberRange'" [ngTemplateOutlet]="numberRangeContent"></ng-container>
        <ng-container *ngSwitchCase="'textInput'" [ngTemplateOutlet]="textInputContent"></ng-container>
        <ng-container *ngSwitchCase="'datePicker'" [ngTemplateOutlet]="datePickerContent"></ng-container>
        <ng-container *ngSwitchCase="'dateRangePicker'" [ngTemplateOutlet]="dateRangePickerContent"></ng-container>
        <ng-container *ngSwitchCase="'treeSingle'" [ngTemplateOutlet]="treeContent"></ng-container>
        <ng-container *ngSwitchCase="'treeMultiple'" [ngTemplateOutlet]="treeContent"></ng-container>
      </ng-container>

      <lv-group *ngIf="hasFooter" lvGutter="0.16rem" class="lv-advanced-filter-footer">
        <button lv-button (click)="onCancel()">{{ i18n.get('cancel') }}</button>
        <button lv-button (click)="onConfirm()" lvType="primary">{{ i18n.get('confirm') }}</button>
      </lv-group>
    </lv-group>
  </div>
</ng-template>

<ng-template #selectContent>
  <lv-select
    [(ngModel)]="filterValue"
    [lvOptions]="filterOption"
    lvCompareWith="value"
    lvMode="{{ currentFilter?.type === 'single' ? 'single' : 'multiple' }}"
    [lvShowCheckAll]="fieldInfoOption?.lvShowCheckAll"
    [lvShowFilter]="fieldInfoOption?.lvShowFilter"
    [lvShowClear]="fieldInfoOption?.lvShowClear"
    lvFilterKey="label"
    lvFilterMode="contains"
    lvInline="true"
    (ngModelChange)="currentFilter?.type === 'single' ? onConfirm() : null"
  ></lv-select>
</ng-template>

<ng-template #numberContent>
  <lv-spinner [(ngModel)]="filterValue" lvOnlyInput="true" style="width: 100%"></lv-spinner>
</ng-template>

<ng-template #numberRangeContent>
  <lv-group lvGutter="0.08rem">
    <lv-spinner [(ngModel)]="filterValue[0]" lvOnlyInput="true"></lv-spinner>
    <span>{{ i18n.get('to') }}</span>
    <lv-spinner [(ngModel)]="filterValue[1]" lvOnlyInput="true"></lv-spinner>
  </lv-group>
</ng-template>

<ng-template #textInputContent>
  <input [(ngModel)]="filterValue" lv-input />
</ng-template>

<ng-template #datePickerContent>
  <lv-date-picker
    [(ngModel)]="filterValue"
    lvInline="true"
    [lvPickerMode]="pickerMode"
    [lvShowTodayButton]="fieldInfoOption?.lvShowTodayButton"
    (ngModelChange)="onConfirm()"
  ></lv-date-picker>
</ng-template>

<ng-template #dateRangePickerContent>
  <lv-date-range-picker [(ngModel)]="filterValue" lvInline="true"></lv-date-range-picker>
</ng-template>

<ng-template #treeContent>
  <lv-tree
    class="lv-advanced-filter-tree"
    [lvData]="fieldInfoOption?.lvData"
    [lvShowCheckbox]="fieldInfoOption?.lvShowCheckbox"
    [lvShowContentIcon]="fieldInfoOption?.lvShowContentIcon"
    [lvBlockNode]="fieldInfoOption?.lvBlockNode"
    [lvVirtualScroll]="fieldInfoOption?.lvVirtualScroll"
    lvSelectionMode="{{ currentFilter?.type === 'treeSingle' ? 'single' : 'multiple' }}"
    [(lvSelection)]="filterValue"
    (lvSelectionChange)="currentFilter?.type === 'treeSingle' ? onConfirm() : null"
  ></lv-tree>
</ng-template>

<ng-template #tagText let-item>
  <div class="lv-tag-text" lv-overflow #lvOverflow="lvOverflow">
    <span style="color: grey">{{ item.label.split(':')[0] }}</span>
    <ng-container *ngIf="item.label.split(':')[1]">
      <span style="color: grey">:</span>
      <span>{{ item.label.split(':').slice(1).join(':') }}</span>
    </ng-container>
  </div>
</ng-template>
